<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link href="./css/cropper.min.css" rel="stylesheet">
    <script src="./js/jquery-1.10.2.js"></script>
    <script src="./js/cropper.min.js"></script>
    <title>尚孔教育微信头像专用生成页</title>
    <style>
        html,
        body {
            background: linear-gradient( 45deg, #0ca542, #aeb10b);
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        
        .boxwrap {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            flex-direction: column;
            z-index: 3;
        }
        
        .boxwrap .btn {
            height: 80px;
            display: flex;
            align-items: center;
            background: linear-gradient( 45deg, #0ca542, #aeb10b);
        }
        
        .boxwrap ul {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            margin-top: 10px;
        }
        
        button#up {
            margin-left: 15px;
            background: #ff9800;
        }
        
        .boxwrap ul li {
            list-style: none;
            line-height: 33px;
            height: 35px;
            align-items: center;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
        }
        
        .boxwrap ul li:nth-child(2) {
            display: flex;
            flex: 1;
            display: flex;
            flex: 1;
        }
        
        .boxwrap ul li:nth-child(2) button {
            flex: 1;
            font-size: 16px;
        }
        
        .btn button {
            border: 0;
            height: 25px;
            margin-left: 2px;
            color: white;
            background: rgb(243, 73, 61);
            border-radius: 4px;
        }
        
        .headportrait {
            width: 300px;
            height: 300px;
            margin: 0px auto;
            position: relative;
            margin-top: 45px;
        }
        
        .headportrait:after {
            position: absolute;
            content: "合成头像";
            top: -30px;
            width: 100%;
            left: 0;
            background: #acb10c;
            line-height: 30px;
            height: 30px;
            font-size: 14px;
            font-weight: bolder;
            color: #fff;
            border-top-right-radius: 4px;
            border-top-left-radius: 4px;
        }
        
        .headportrait::before {
            position: absolute;
            content: "上传照片显示在此处";
            top: 47%;
            width: 100%;
            left: 0;
            color: #ccc;
        }
        
        .headportrait canvas {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        
        .headportrait canvas:nth-child(2) {
            z-index: 0;
        }
        
        .headportraitWrap {
            text-align: center;
            overflow: hidden;
            background: #fff;
            margin: 10px;
            padding-bottom: 19px;
            border-radius: 4px;
        }
        
        .headportraitWrap button {
            width: 300px;
            margin-top: 10px;
            border: 0;
            padding: 8px;
            border-radius: 4px;
            background-color: antiquewhite;
        }
        
        .headportraitWrap button:nth-child(3) {
            background-color: rgb(243, 73, 61);
            color: white;
        }
        
        .copyright {
            text-align: center;
            position: fixed;
            width: 100%;
            bottom: 5px;
            font-size: 12px;
            color: #fff;
        }
        
        button#getCroppedCanvas {
            background: #9e0303;
        }
        
        img#img {
            position: absolute;
            z-index: 1000;
        }
        
        .remarks {
            padding: 12px;
            display: none;
        }
        
        .remarks1 {
            position: fixed;
            bottom: 29px;
            font-size: 12px;
            text-align: center;
            width: 100%;
            display: none;
        }
        
        #backgroundlarge,
        #headportraitlarge,
        #backgroundcanvasScalelarge,
        #imglarge {
            width: 700px;
            height: 700px;
            position: absolute;
            bottom: 0;
            opacity: 0;
            top: auto;
            left: 0;
        }
        
        #imglarge {
            z-index: 1000000;
            display: none;
        }
    </style>
</head>

<body>
    <div class="headportraitWrap">
        <div class="headportrait">
            <canvas id="background"></canvas>
            <canvas id="headportrait"></canvas>
            <canvas id="backgroundcanvasScale" style="display:none;"></canvas>
            <img id="img" src="" alt="" style="width: 300px; height:300px;display: none;">
            <canvas id="backgroundlarge"></canvas>
            <canvas id="headportraitlarge"></canvas>
            <canvas id="backgroundcanvasScalelarge"></canvas>
            <img id="imglarge" src="" alt="">
        </div>
        <button id="upfile">上传照片</button>
        <button id="confirm">合成</button>
    </div>

    <div class="boxwrap">
        <div class="box">
            <img id="image" src="./img/b1.png">
        </div>
        <div class="btn">
            <ul>
                <li>
                    <button id="enlarge">放大</button>
                    <button id="narrow">缩小</button>
                    <button id="left">左移</button>
                    <button id="right">右移</button>
                    <button id="top">上移</button>
                    <button id="bottom">下移</button>
                </li>
                <li>
                    <button id="getCroppedCanvas">确定</button>
                    <button id="up">重选照片</button>
                </li>
            </ul>
            <input type="file" id="file" style="display: none;">

        </div>

    </div>
    <div class="remarks">
        <h1>电脑端操作：</h1>
        <p>1、点击上传照片</p>
        <p>2、选择上传照片后点击合成</p>
        <p>3、右键点击合成头像，图片另存为</p>
    </div>
    <div class="remarks1">
        移动端
        <color style="color: #ccc;">(手机等移动设备)</color>操作不成功请用电脑端操作
    </div>
    <div class="copyright">&copy; copyright 尚孔教育培训有限公司 2021-<span class="copyrightYear">2020</span></div>
    <script>
        let _b = document.getElementById("background");
        let _blarge = document.getElementById("backgroundlarge");
        let ctxb = _b.getContext('2d');
        let ctxblarge = _blarge.getContext('2d');
        var img = new Image();
        let _body = document.body.clientWidth;
        let _downLoad = false;
        img.src = "./img/b.png";
        _b.width = 300;
        _b.height = 300;
        _blarge.width = 700;
        _blarge.height = 700;


        img.onload = function() {
            ctxb.drawImage(img, 0, 0, _b.width, _b.height); //生成背景
            ctxblarge.drawImage(img, 0, 0, _blarge.width, _blarge.height); //生成背景
        };

        console.log(document.body.clientWidth);
        if (_body > 1000) {
            $(".remarks").css("display", "block");
        } else {
            $(".remarks1").css("display", "block");
            console.log(_b.width + ":" + _b.height);
        };

        $(".copyrightYear").text(new Date().getFullYear());


        $("#file").change(function() {
            _downLoad = true;
            // $("#img").css("display", "none");

            let jpgReg = /^.+(\png|\jpg|\jpeg|\bmp)$/
            let _type = document.getElementById('file').files[0].name.split(".")[document.getElementById('file').files[0].name.split(".").length - 1]; //文件格式
            console.log(_type);
            console.log(jpgReg.test("." + _type));
            if (!jpgReg.test("." + _type)) {
                alert("请选择png|jpg|jpeg|bmp文件格式");
                return
            };
            $(".boxwrap").css("display", "flex");
            const windowURL = window.URL || window.webkitURL;
            $('#image').cropper('replace', windowURL.createObjectURL(document.getElementById('file').files[0]), false);
            //$('#image').cropper('enable');
        });

        $(".box").css("height", document.body.clientHeight - 80);
        $(".box").css("width", document.body.clientWidth);
        console.log("123");


        $("#upfile,#imglarge,#backgroundcanvasScalelarge").click(function() {
            $("#file").click();
        });
        let _width, _height;
        $('#image').cropper({
            aspectRatio: 1,
            movable: true,
            original: false,
            crop: function(e) {
                //console.log(e);
                _width = e.width;
                _height = e.height;
            }
        });

        $("#getCroppedCanvas").on("click", function() {
            console.log($('#image').cropper('getCroppedCanvas'));;
            var cas = $('#image').cropper('getCroppedCanvas');
            var base64url = cas.toDataURL('image/jpeg');
            cas.toBlob(function(e) {})
            $('.cavans').html(cas) //在body显示出canvas元素
            let _canvasScale = document.getElementById("headportrait");
            let _canvasScalelarge = document.getElementById("headportraitlarge");
            let ctxScale = _canvasScale.getContext('2d');
            let ctxScalelarge = _canvasScalelarge.getContext('2d');
            _canvasScale.width = 300;
            _canvasScale.height = 300;
            _canvasScalelarge.width = 700;
            _canvasScalelarge.height = 700;
            ctxScale.clearRect(0, 0, _canvasScale.width, _canvasScale.height);
            ctxScalelarge.clearRect(0, 0, _canvasScalelarge.width, _canvasScalelarge.height);
            //ctxScale.drawImage(cas, 0, 0, _width, _height, 0, 0, _width, _height); //生成头像
            ctxScale.drawImage(cas, 0, 0, _width, _height, 0, 0, _canvasScale.width, _canvasScale.height); //生成头像
            ctxScalelarge.drawImage(cas, 0, 0, _width, _height, 0, 0, _canvasScalelarge.width, _canvasScalelarge.height); //生成头像

            $(".boxwrap").css("display", "none");


            $("#file").val(""); //清空
        });

        //放大
        $('#enlarge').click(function() {
            $('#image').cropper('zoom', 0.1)
        });


        //缩小
        $('#narrow').click(function() {
            $('#image').cropper('zoom', -0.1)
        });


        //左
        $('#left').click(function() {
            $('#image').cropper("move", -10, 0)
        });

        //右
        $('#right').click(function() {
            $('#image').cropper("move", 10, 0)
        });

        //上
        $('#top').click(function() {
            $('#image').cropper("move", 0, -10)
        });

        //下
        $('#bottom').click(function() {
            $('#image').cropper("move", 0, 10)
        });

        let _Pendant1CanvasScale = document.getElementById('background');
        let _canvasScale = document.getElementById('headportrait');
        let _compose = document.getElementById('backgroundcanvasScale');
        let _Pendant1CanvasScalelarge = document.getElementById('backgroundlarge');
        let _canvasScalelarge = document.getElementById('headportraitlarge');
        let _composelarge = document.getElementById('backgroundcanvasScalelarge');
        //合同图片
        let composeBtnFn = () => {

            //比例合成
            let ctxScale = _compose.getContext('2d');
            let ctxScalelarge = _composelarge.getContext('2d');

            _compose.width = 300;
            _compose.height = 300;
            _composelarge.width = 700;
            _composelarge.height = 700;
            ctxScale.drawImage(_canvasScale, 0, 0, _compose.width, _compose.height); //合成头像
            ctxScale.drawImage(_Pendant1CanvasScale, 0, 0, _compose.width, _compose.height); //合成挂件
            ctxScalelarge.drawImage(_canvasScalelarge, 0, 0, _composelarge.width, _composelarge.height); //合成头像
            ctxScalelarge.drawImage(_Pendant1CanvasScalelarge, 0, 0, _composelarge.width, _composelarge.height); //合成挂件
        };

        //保存
        document.getElementById("confirm").onclick = function() {

            composeBtnFn(); //合成文件
            downLoad(saveAsPNG(_compose));
            downLoad1(saveAsPNG(_composelarge));
        };

        //保存
        function downLoad(url) {
            if (!_downLoad) {
                alert("请上传照片");
                return
            };
            $("#img").attr("src", url);
            $("#imglarge").attr("src", url);
            $("#imglarge").css("display", "block");
            $("#img").css("display", "block");
            if (_body > 1000) {
                alert("合成成功 右键点击头像另存为")
            } else {
                alert("合成成功 长按头像保存")
            };

            return
            let aLink = document.createElement('a');
            let blob = this.base64ToBlob(url); //new Blob([content]);

            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
            aLink.download = new Date().getTime();
            aLink.href = URL.createObjectURL(blob);

            aLink.click()
        };

        function downLoad1(url) {
            if (!_downLoad) {
                alert("请上传照片");
                return
            };
            $("#img").attr("src", url);
            $("#imglarge").attr("src", url);
            $("#img").css("display", "block");
            $("#imglarge").css("display", "block");


            return
            let aLink = document.createElement('a');
            let blob = this.base64ToBlob(url); //new Blob([content]);

            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
            aLink.download = new Date().getTime();
            aLink.href = URL.createObjectURL(blob);

            aLink.click()
        };
        // 保存成png格式的图片
        function saveAsPNG(canvas) {
            return canvas.toDataURL("image/png");
        };
        //base64转blob
        function base64ToBlob(code) {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;

            let uInt8Array = new Uint8Array(rawLength);

            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {
                type: contentType
            });
        };

        $("#up").click(function() {
            $("#file").click();
            $("#imglarge").css("display", "none");
        });
    </script>
</body>

</html>